

<h2>背景</h2>
<p>由于之前都把零散的知识都写在 <a href="https://links.jianshu.com/go?to=https%3A%2F%2Fgist.github.com" target="_blank">Gist</a> 上，要查找的时候不是很系统化，所以打算挪到 <a href="https://links.jianshu.com/go?to=https%3A%2F%2Fwww.gitbook.com" target="_blank">GitBook</a> 上来统一管理，而且 <a href="https://links.jianshu.com/go?to=https%3A%2F%2Fwww.gitbook.com" target="_blank">GitBook</a> 写完编译后可以生成静态页面发布到博客上，逼格满满的样子。</p>
<h2>GitBook 简介</h2>
<ul>
<li><a href="https://links.jianshu.com/go?to=https%3A%2F%2Fwww.gitbook.com" target="_blank">GitBook 官网</a></li>
<li><a href="https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FGitbookIO%2Fgitbook" target="_blank">GitBook 文档</a></li>
</ul>
<h2>GitBook 准备工作</h2>
<h3>安装 Node.js</h3>
<p>GitBook 是一个基于 Node.js 的命令行工具，下载安装 <a href="https://links.jianshu.com/go?to=https%3A%2F%2Fnodejs.org%2Fen" target="_blank">Node.js</a>，安装完成之后，你可以使用下面的命令来检验是否安装成功。</p>
<pre><code>$ node -v
v7.7.1
</code></pre>
<h3>安装 GitBook</h3>
<p>输入下面的命令来安装 GitBook。</p>
<pre><code>$ npm install gitbook-cli -g
</code></pre>
<p>安装完成之后，你可以使用下面的命令来检验是否安装成功。</p>
<pre><code>$ gitbook -V
CLI version: 2.3.2
GitBook version: 3.2.3
</code></pre>
<p>更多详情请参照 <a href="https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FGitbookIO%2Fgitbook%2Fblob%2Fmaster%2Fdocs%2Fsetup.md" target="_blank">GitBook 安装文档</a> 来安装 GitBook。</p>
<h3>编辑器</h3>
<p>可以用 VsCode、Typora 等自己喜欢的来编辑。</p>
<h2>先睹为快</h2>
<p>GitBook 准备工作做好之后，我们进入一个你要写书的目录，输入如下命令。</p>
<pre><code>$ gitbook init
warn: no summary file in this book
info: create README.md
info: create SUMMARY.md
info: initialization is finished
</code></pre>
<p>可以看到他会创建 README.md 和 SUMMARY.md 这两个文件，README.md 应该不陌生，就是说明文档，而 SUMMARY.md 其实就是书的章节目录，其默认内容如下所示：</p>
<pre><code># Summary


* [Introduction](README.md)
  </code></pre>

<p>接下来，我们输入 <code>$ gitbook serve</code> 命令，然后在浏览器地址栏中输入 <code>http://localhost:4000</code> 便可预览书籍。</p>
<p>效果如下所示：</p>
<div class="image-package">
<div class="image-container" style="max-width: 700px; max-height: 349px;">
<div class="image-container-fill" style="padding-bottom: 49.830000000000005%;"></div>
<div class="image-view" data-width="2878" data-height="1434"><img data-original-src="//upload-images.jianshu.io/upload_images/1944467-80941aa796f964d9" data-original-width="2878" data-original-height="1434" data-original-format="image/jpeg" data-original-filesize="91659"></div>
</div>
<div class="image-caption"></div>
</div>
<p>运行该命令后会在书籍的文件夹中生成一个 <code>_book</code> 文件夹, 里面的内容即为生成的 html 文件，我们可以使用下面命令来生成网页而不开启服务器。</p>
<pre><code>gitbook build
</code></pre>
<p>下面我们来详细介绍下 GitBook 目录结构及相关文件。</p>
<h2>目录结构</h2>
<p>GitBook 基本的目录结构如下所示：</p>
<pre><code>.
├── book.json
├── README.md
├── SUMMARY.md
├── chapter-1/
|   ├── README.md
|   └── something.md
└── chapter-2/
    ├── README.md
    └── something.md
</code></pre>
<p>下面我们主要来讲讲 book.json 和 SUMMARY.md 文件。</p>
<h3>book.json</h3>
<p>该文件主要用来存放配置信息，我先放出我的配置文件。</p>
<pre><code class="json">{
    "title": "Blankj's Glory",
    "author": "Blankj",
    "description": "select * from learn",
    "language": "zh-hans",
    "gitbook": "3.2.3",
    "styles": {
        "website": "./styles/website.css"
    },
    "structure": {
        "readme": "README.md"
    },
    "links": {
        "sidebar": {
            "我的狗窝": "https://blankj.com"
        }
    },
    "plugins": [
        "-sharing",
        "splitter",
        "expandable-chapters-small",
        "anchors",


        "github",
        "github-buttons",
        "donate",
        "sharing-plus",
        "anchor-navigation-ex",
        "favicon"
    ],
    "pluginsConfig": {
        "github": {
            "url": "https://github.com/Blankj"
        },
        "github-buttons": {
            "buttons": [{
                "user": "Blankj",
                "repo": "glory",
                "type": "star",
                "size": "small",
                "count": true
                }
            ]
        },
        "donate": {
            "alipay": "./source/images/donate.png",
            "title": "",
            "button": "赞赏",
            "alipayText": " "
        },
        "sharing": {
            "douban": false,
            "facebook": false,
            "google": false,
            "hatenaBookmark": false,
            "instapaper": false,
            "line": false,
            "linkedin": false,
            "messenger": false,
            "pocket": false,
            "qq": false,
            "qzone": false,
            "stumbleupon": false,
            "twitter": false,
            "viber": false,
            "vk": false,
            "weibo": false,
            "whatsapp": false,
            "all": [
                "google", "facebook", "weibo", "twitter",
                "qq", "qzone", "linkedin", "pocket"
            ]
        },
        "anchor-navigation-ex": {
            "showLevel": false
        },
        "favicon":{
            "shortcut": "./source/images/favicon.jpg",
            "bookmark": "./source/images/favicon.jpg",
            "appleTouch": "./source/images/apple-touch-icon.jpg",
            "appleTouchMore": {
                "120x120": "./source/images/apple-touch-icon.jpg",
                "180x180": "./source/images/apple-touch-icon.jpg"
            }
        }
    }

}
</code></pre>

<p>相信很多节点自己也能猜到是什么意思，我还是简单介绍下吧。</p>
<h4>title</h4>
<p>本书标题</p>
<h4>author</h4>
<p>本书作者</p>
<h4>description</h4>
<p>本书描述</p>
<h4>language</h4>
<p>本书语言，中文设置 "zh-hans" 即可</p>
<h4>gitbook</h4>
<p>指定使用的 GitBook 版本</p>
<h4>styles</h4>
<p>自定义页面样式</p>
<h4>structure</h4>
<p>指定 Readme、Summary、Glossary 和 Languages 对应的文件名</p>
<h4>links</h4>
<p>在左侧导航栏添加链接信息</p>
<h4>plugins</h4>
<p>配置使用的插件</p>
<h4>pluginsConfig</h4>
<p>配置插件的属性</p>
<h3>SUMMARY.md</h3>
<p>这个文件主要决定 GitBook 的章节目录，它通过 Markdown 中的列表语法来表示文件的父子关系，下面是一个简单的示例：</p>
<pre><code># Summary


* [Introduction](README.md)
* [Part I](part1/README.md)
  * [Writing is nice](part1/writing.md)
  * [GitBook is nice](part1/gitbook.md)
* [Part II](part2/README.md)
  * [We love feedback](part2/feedback_please.md)
  * [Better tools for authors](part2/better_tools.md)
    </code></pre>

<p>这个配置对应的目录结构如下所示:</p>
<div class="image-package">
<div class="image-container" style="max-width: 604px; max-height: 636px;">
<div class="image-container-fill" style="padding-bottom: 105.3%;"></div>
<div class="image-view" data-width="604" data-height="636"><img data-original-src="//upload-images.jianshu.io/upload_images/1944467-de97699c5919469e" data-original-width="604" data-original-height="636" data-original-format="image/jpeg" data-original-filesize="36077"></div>
</div>
<div class="image-caption"></div>
</div>
<p>我们通过使用 <code>标题</code> 或者 <code>水平分割线</code> 将 GitBook 分为几个不同的部分，如下所示：</p>
<pre><code># Summary


### Part I

* [Introduction](README.md)
* [Writing is nice](part1/writing.md)
* [GitBook is nice](part1/gitbook.md)

### Part II

* [We love feedback](part2/feedback_please.md)
* [Better tools for authors](part2/better_tools.md)

---

* [Last part without title](part3/title.md)
  </code></pre>

<p>这个配置对应的目录结构如下所示:</p>
<div class="image-package">
<div class="image-container" style="max-width: 596px; max-height: 905px;">
<div class="image-container-fill" style="padding-bottom: 129.19%;"></div>
<div class="image-view" data-width="596" data-height="770"><img data-original-src="//upload-images.jianshu.io/upload_images/1944467-e80d5e46997e5eb4" data-original-width="596" data-original-height="770" data-original-format="image/jpeg" data-original-filesize="43212"></div>
</div>
<div class="image-caption"></div>
</div>
<h2>插件</h2>
<p>GitBook 有 <a href="https://links.jianshu.com/go?to=https%3A%2F%2Fplugins.gitbook.com%2F" target="_blank">插件官网</a>，默认带有 5 个插件，highlight、search、sharing、font-settings、livereload，如果要去除自带的插件， 可以在插件名称前面加 <code>-</code>，比如：</p>
<pre><code>"plugins": [
    "-search"
]
</code></pre>
<p>如果要配置使用的插件可以在 book.json 文件中加入即可，比如我们添加 <a href="https://links.jianshu.com/go?to=https%3A%2F%2Fplugins.gitbook.com%2Fplugin%2Fgithub" target="_blank">plugin-github</a>，我们在 book.json 中加入配置如下即可：</p>
<pre><code>{
    "plugins": [ "github" ],
    "pluginsConfig": {
        "github": {
            "url": "https://github.com/your/repo"
        }
    }
}
</code></pre>
<p>然后在终端输入 <code>gitbook install ./</code> 即可。</p>
<p>如果要指定插件的版本可以使用 plugin@0.3.1，因为一些插件可能不会随着 GitBook 版本的升级而升级。</p>
<h2>结语</h2>
<p>这是我对 GitBook 使用的总结，希望能帮到今后需要的小伙伴。</p>